<template>
  <view class="flex-col page">
    <view class="flex-col section">
      <view class="flex-row items-center group">
        <image class="image" @click="gobacks" src="/static/assets2/d88d1ea18d9f1749015a1248bb8ed0fa.png" />
        <text class="font ml-13">TA的动态</text>
      </view>
      <view class="mt-28 flex-row justify-between items-center">
        <view class="flex-row items-center">
          <image class="shrink-0 image_2" src="/static/assets2/8d3b0d653e7c02d30ca74268e4b991ad.png" />
          <text class="font text ml-17">杨紫夏</text>
        </view>
        <image class="image image_3" src="/static/assets2/d2e17d1104e033b28dd7471ee9270b25.png" />
      </view>
    </view>
    <view class="flex-col relative list">
      <view class="flex-col mt-12 list-item" v-for="(item, index) in 4" :key="index">
        <view class="flex-row justify-between items-center self-stretch">
          <text class="font_2">2025/2/17</text>
          <view class="flex-row items-center">
            <image class="shrink-0 image_4" src="/static/assets2/6459ce556896741faee51deb1e567a86.png" />
            <text class="ml-6 font_3">123</text>
          </view>
        </view>
        <view class="flex-col self-stretch group_2">
          <text class="self-stretch font_4">
            荐傀。豫茂绪鹅鉴澳拧改玉匝握戒指新休沟月喘等酱弊猫隆愁誉裁疾告笼车蠢实症抚析匠垫彪骚哼号宪屏宝蠕灸微带幕涛雹汉舵浊穷靠颂波姓庆画绳拾、磷奴楼都癌浦使吹捕倍诫磺接顷达隙扼烫服意蓝帽添挑？
          </text>
          
		  
		  <view class="">
			  <image v-if=" index/2==0 " class="mt-8 self-start image_5" src="/static/assets2/082ca53ffbb26b742c57ba875c26e216.png" />
		  	<view class="cojms" v-else>
		  		<image class='chusg' src="/static/acti/2.webp" mode=""></image>
		  		<image class='chusg' src="/static/acti/2.webp" mode=""></image>
		  		<image class='chusg' src="/static/acti/2.webp" mode=""></image>
		  		<image class='chusg' src="/static/acti/2.webp" mode=""></image>
		  	</view>
		  </view>
        </view>
        <view class="flex-row items-center self-stretch group_3">
          <image class="image_6" src="/static/assets2/c763339a7c7809a0c7f403d22a40f831.png" />
          <text class="ml-6 font_5 text_2">12km</text>
        </view>
        <view class="flex-row justify-between equal-division group_4">
          <view class="flex-row items-center">
            <image class="shrink-0 image_7" src="/static/assets2/cb9625205445bfc4ca49cf2b95f26bd0.png" />
            <text class="ml-6 font_3">1234</text>
          </view>
          <view class="flex-row items-center">
            <image class="shrink-0 image_7" src="/static/assets2/b45758093dcd14a28f683ca65d36ddfd.png" />
            <text class="ml-6 font_3">12</text>
          </view>
          <view class="flex-row items-center">
            <image class="shrink-0 image_7" src="/static/assets2/5953b45a91ea41a63b59d8f4cb26dfa0.png" />
            <text class="font_3 ml-7">123</text>
          </view>
          <view class="flex-row items-center">
            <image class="shrink-0 image_7" src="/static/assets2/77cf062e541d312e41ccf311766a569e.png" />
            <text class="ml-6 font_3">123</text>
          </view>
        </view>
      </view>
    </view>
	
	<image class="fied" src="/static/assets9/Frame 5990.png" mode=""></image>
	
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        items: [null, null, null],
      };
    },

    methods: {
		gobacks() {
		
			// #ifdef H5
			history.back();
			// #endif
		
			// #ifdef APP
			uni.navigateBack()
			// #endif
		
		},
	},
  };
</script>

<style scoped lang="scss">
	.fied{
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		right: 30rpx;
		bottom: 50rpx;
	}
	.cojms {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 创建3列，每列宽度相同 */
		grid-auto-rows: minmax(50px, auto);
		/* 设置行高，根据需要调整 */
		gap: 10px;
	
		/* 可选：设置网格项之间的间距 */
		.chusg {
			width: 200rpx !important;
			height: 200rpx !important;
			border-radius: 24rpx;
		}
	}
  .ml-13 {
    margin-left: 26rpx;
  }
  .ml-17 {
    margin-left: 34rpx;
  }
  .ml-7 {
    margin-left: 14rpx;
  }
  .page {
    padding-bottom: 108rpx;
    background-color: #f7eff8;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .section {
      padding: 112rpx 32rpx 1248rpx;
      background-image: url('/static/assets2/e9cd3fc4ee4eabc1262262a469ab1c21.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .group {
        padding: 0 8rpx;
      }
      .image_2 {
        border-radius: 80rpx;
        width: 160rpx;
        height: 160rpx;
      }
      .font {
        font-size: 40rpx;
        font-family: PingFang SC;
        line-height: 37.6rpx;
        font-weight: 700;
        color: #2a222f;
      }
      .text {
        line-height: 36.76rpx;
      }
      .image {
        width: 48rpx;
        height: 48rpx;
      }
      .image_3 {
        margin-right: 8rpx;
      }
    }
    .list {
      margin-top: -1184rpx;
      padding: 0 32rpx;
      .list-item {
        padding: 32rpx;
        background-color: #ffffff;
        border-radius: 32rpx;
        &:first-child {
          margin-top: 0;
        }
        .font_2 {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 29.44rpx;
          font-weight: 700;
          color: #2a222f;
        }
        .image_4 {
          width: 40rpx;
          height: 40rpx;
        }
        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 20.78rpx;
          color: #837386;
        }
        .group_2 {
          margin-right: 8rpx;
          margin-top: 28rpx;
          .font_4 {
            font-size: 28rpx;
            font-family: PingFang SC;
            line-height: 40rpx;
            color: #2a222f;
          }
          .image_5 {
            border-radius: 32rpx;
            width: 308rpx;
            height: 360rpx;
          }
        }
        .group_3 {
          margin-top: 16rpx;
          .image_6 {
            width: 32rpx;
            height: 32rpx;
          }
          .font_5 {
            font-size: 24rpx;
            font-family: PingFang SC;
            line-height: 17.8rpx;
            color: #c2afc3;
          }
          .text_2 {
            line-height: 17.48rpx;
          }
        }
        .equal-division {
          align-self: flex-start;
          margin-top: 24rpx;
          .image_7 {
            width: 39rpx;
            height: 39rpx;
          }
        }
        .group_4 {
          width: 541.1rpx;
        }
      }
    }
  }
</style>